<template>
  <div class="sll">
    <!-- {{modData}} -->
    <!-- {{fromModData}} -->
    <!-- 修改组件 -->
    <el-tooltip class="item" effect="dark" content="修改" placement="bottom-start">
      <el-button
        style="color:#0B9AC3;border:none;"
        icon="el-icon-edit"
        circle
        @click="DialogVisibleMod = true"
      ></el-button>
    </el-tooltip>
    <div>
      <el-dialog
        title="编辑"
        :visible.sync="DialogVisibleMod"
        width="900px"
        :before-close="handleClose"
        :show-close="false"
        :modal-append-to-body="false"
        style="text-align: left;"
      >
        <!-- {{TableDataModel}} -->
        <div
          class="list"
          v-for="(item,index) in attributeOrderClone"
          :key="index"
          v-if="item.modificationSign"
        >
          <!-- {{searchOption}}
          {{searchOptions}}-->
          <!-- <dictionaries :searchData='attributeOrder' :modelType='modelType'></dictionaries> -->
          <span class="fon">
            <span v-if="!item['skipSign']" style="color:red;">*</span>
            {{item.CN}}:
          </span>
          <span class="inb" v-if="item.type==='input'">
            <!-- {{fromModData[item.EN]}} -->
            <el-input
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请输入内容"
              @blur="BurExp($event,item,index)"
              clearable
              size="mini"
            ></el-input>
          </span>
          <span v-if="!item.result" class="font_color">{{item.err}}</span>
          <span class="inb" v-if="item.type=='date'">
            <!-- <h1>{{modData.createTime}}</h1> -->
            <el-date-picker
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              type="datetime"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="getSTime"
              style="width:90%"
              size="mini"
            ></el-date-picker>
          </span>
          <!-- {{fromModData}} -->
          <span v-if="item.type=='select'">
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
              v-if="item.typeGroupCode"
            >
              <el-option
                v-for="i in optionsZi[item.EN]"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </el-select>
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
              v-else-if="item.dictTable"
            >
              <el-option
                v-for="i in searchOptionTable[item.EN]"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </el-select>
            <el-select
                v-else
                v-model="fromModData[item.EN]"
                placeholder="请选择"
                size="mini"
                clearable
              >
              
                <el-option
                  v-for="i in item.option"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value"
                ></el-option>
              </el-select>
          </span>
          <!-- user -->
          <span v-if="item.type=='user'">
            <!-- {{useruData}} -->
            <el-select
              :disabled="item.examineDisabled"
              v-model="fromModData[item.EN]"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="i in useruData"
                :key="i.value"
                :label="i.name"
                :value="i.id"
              ></el-option>
            </el-select>
          </span>
          <!-- 单选 -->
          <span v-if="item.type=='radio'">
            <!-- {{item.radio}} -->
            <div style="margin-top: 20px">
              <el-radio-group v-model="fromModData[item.EN]" size="small">
                <el-radio-button v-for="i in item.radio" :label="i.code" :key="i.code">{{i.name}}</el-radio-button>
              </el-radio-group>
            </div>
          </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="modifyData(true,modData)" size="mini">确定</el-button>
          <el-button @click="modifyData(false,modData)" size="mini">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  name: "modificationi",
  props: ["modData", "attributeOrder", "optionsZi", "searchOptionTable","TD","UserArr","useruData"],
  data() {
    return {
      DialogVisibleMod: false,
      //深克隆
      attributeOrderClone: undefined,
      //表单里面的值
      fromModData: undefined,
      // 组件类型
      modelType: "search",
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      //编辑里面单选
      XTD:undefined,
      //查用户
      // useruData:[],
    };
  },
  watch: {
    optionsZi(newVal) {
      console.log(newVal);

      this.searchOption = newVal;
    },
    searchOptionTable(newVal) {
      console.log(newVal);
      this.searchOptions = newVal;
    },
    modData(newData) {
      // console.log(newData,'888666');
      this.getUpdataWatch();
    }
  },
  computed: {
    TableDataModel() {
      let new_DataModel = JSON.parse(JSON.stringify(this.attributeOrder));
      for (let i = 0; i < new_DataModel.length; i++) {
        if (!new_DataModel[i].modificationSign) {
          console.log("-------------计算属性-----------");
          new_DataModel.splice(i, 1);
        }
      }
      console.log(new_DataModel);
      return new_DataModel;
    }
  },
  mounted() {
    [this.attributeOrderClone, this.fromModData,this.XTD] = JSON.parse(
      JSON.stringify([this.attributeOrder, this.modData,this.TD])
    );
    // console.log(XID)
    // console.log('*****************')
    // console.log(this.attributeOrderClone)
    // console.log(this.fromModData)
  },
  methods: {
    // 更新数据
    getUpdataWatch() {
      [this.attributeOrderClone, this.fromModData, this.XTD] = JSON.parse(
        JSON.stringify([this.attributeOrder, this.modData, this.TD])
      );   
      // this.changeDictionariesType(this.fromModData)
    },
    // 字典回调
    // dictionariesCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOption = res
    //   // console.log(this.searchOption,'ceshiyixia');

    // },
    // 跨表字典回调
    // dictionariesTableCallBack(res){
    //   // console.log(res,'zicisyiihsjkdjsa');
    //   // this.$nextTick(function(){
    //   //   this.searchOption = res
    //   // })
    //   this.searchOptionTable = res
    //   // console.log(this.searchOption,'ceshiyixia');

    // },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.modifyData(false, this.modData);
          done();
        })
        .catch(_ => {});
    },
    //转化时间格式
    getSTime(val) {
      this.modData.createTime = val;
    },
    //确定修改-取消修改
    modifyData(value, modData) {
      //value=true  确定修改
      //value=false  取消修改
      // console.log(value,modData)
      let bur = true;
      if (value === false) {
        this.$emit("modifyData", false, this.fromModData);
        this.DialogVisibleMod = false;
        this.$message({
          message: "已取消修改",
          type: "success"
        });
      } else {
        for (let i = 0; i < this.attributeOrderClone.length; i++) {
          if (this.attributeOrderClone[i].result === false) {
            bur = false;
          }
        }

        if (bur === true && value === true) {
          this.$emit("modifyData", value, this.fromModData);
          this.DialogVisibleMod = false;
          this.$message({
            message: "修改成功",
            type: "success"
          });
        } else if (bur === false && value === true) {
          this.$message({
            message: "请输入合法内容！",
            type: "warning"
          });
        }
      }
    },

    //正则表达式
    BurExp(e, item, index) {
      if (this.attributeOrderClone[index].attributeOrderClone) {
        item.result = true;
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value);
        item.result = boolean;
      }
    }
  }
};
</script>
<style scoped src="src/styles/allCss.css"></style>
<style lang="scss" scoped>
.sll {
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    height: 44px;
    width: 300px;
    // margin: 0;
    // padding: 0;
    .font_color {
      font-size: 12px;
      padding-left: 55px;
      padding-top: 10px;
    }
  }
}
</style>


